<template>
    <div class="com-container">
        <div class="com-chart" ref="ref_rank"></div>
    </div>
</template>
<script>
export default {
    name:'rank',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            startValue:0, //dataZoom的开始值
            endValue:9, //dataZoom的结束值
            timeId:null, //定时器id
        }
    },
    created(){
        this.$socket.registerCallBack('rankData',this.getData);
    },
    mounted(){
        this.initChart();
        // this.getData();
        this.$socket.send({
            action:'getData',
            socketType:'rankData',
            chartName:'rank',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.screenAdapter);
        // 销毁定时器
        clearInterval(this.timeId)
        // 注销回调函数
        this.$socket.unRegisterCallBack('rankData');
    },
    methods:{
        // 定义初始化图表的方法initChart()
        async initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_rank,'chalk');
            // 请求数据库数据
            const initOption = {
                // 配置title
                title:{
                    text:'▎地区销售图表',
                    top:'5%',
                    left:'5%'
                },
                // 配置网格位置
                grid:{
                    top:'30%',
                    left:'8%',
                    bottom:'12%',
                    right:'5%'
                },
                xAxis:{
                    type:'category',
                    axisLabel:{
                        show:true,
                        interval:0, //配置显示全部
                    }
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        type:'bar'
                    }
                ]
            }
            this.chartInstance.setOption(initOption);
            // 事件绑定
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        // 获取数据
        getData(ret){
            // const { data:ret } = await this.$http('rank');
            this.allData = ret;
            // 对数组进行大到小排序
            this.allData.sort((a,b) =>{
                return b.value - a.value;
            })
            this.updateChart();
            this.startInterval();
        },
        // 更新图表方法updateChart()
        updateChart(){
            // 颜色
            const colorArr = [
                ['#0ba82c','#4ff778'],
                ['#2e72bf','#23e5e5'],
                ['#5052ee','#ab6ee5']
            ]
            // 类目数据
            const xAxisArr = this.allData.map(item => item.name );
            // 每个省份的销售数据
            const yAxisArr = this.allData.map(item => item.value);
            // 数据配置项
            const dataOption = {
                // 设置缩放
               dataZoom:{
                   show:false,
                   startValue:this.startValue,
                   endValue:this.endValue
               },
               xAxis:{
                   data:xAxisArr
               },
               series:[
                   {
                       data:yAxisArr,
                       //配置渐变颜色
                       itemStyle:{
                           color:arg=>{
                               let currentColor = null;
                                if(arg.value > 300){
                                    currentColor = colorArr[0]
                                }else if(arg.value > 200){
                                    currentColor = colorArr[1]
                                }else{
                                    currentColor = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                                    {
                                        offset:0,
                                        color:currentColor[0]
                                    },
                                    {
                                        offset:1,
                                        color:currentColor[1]
                                    }
                                ])
                           }
                       }
                   }
               ]
            }
            this.chartInstance.setOption(dataOption)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           const titleFontSize = this.$refs.ref_rank.offsetWidth / 100 * 3.6;
           const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize / 2
                    }
                },
                series:[
                    {
                       barWidth:titleFontSize,
                       itemStyle:{
                           barBorderRadius:[titleFontSize / 2,titleFontSize / 2, 0, 0]
                       } 
                    }
                ]
           }
            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        // 定义定时器
        startInterval(){
            if(this.timeId){
                clearInterval(this.timeId)
            }
            this.timeId = setInterval(()=>{
                this.startValue++;
                this.endValue++;
                if(this.endValue > this.allData.length -1){
                    this.startValue = 0;
                    this.endValue = 9;
                }
                this.updateChart();
            },3000)
        }
    }
}
</script>
<style lang="less" scoped>

</style>